<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta charset="utf-8">
            <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
            <link href="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.css" rel="stylesheet">
                <title>
                    热门公司
                </title>
            </link>
        </meta>
    </head>
    <body>
        <header class="navbar navbar-inverse navbar-static-top bs-docs-nav" id="top">
            <div class="container">
                <div class="navbar-header">
                    <button aria-controls="bs-navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-navbar" data-toggle="collapse" type="button">
                        <span class="sr-only">
                            Toggle navigation
                        </span>
                        <span class="icon-bar">
                        </span>
                        <span class="icon-bar">
                        </span>
                        <span class="icon-bar">
                        </span>
                    </button>
                    <a class="navbar-brand" href="../">
                        Logo
                    </a>
                </div>
                <nav class="collapse navbar-collapse" id="bs-navbar">
                    <ul class="nav navbar-nav">
                        <li  >
                            <a href="weekline.html">
                                一周职位统计
                            </a>
                        </li>
                        <li>
                            <a class="active" href="workyear.html">
                                工作年限统计
                            </a>
                        </li>
                        <li class="active">
                            <a href="company.html">
                                热门公司统计
                            </a>
                        </li>
                        <li>
                            <a href="education.html">
                                学历分析
                            </a>
                        </li>
                        <li>
                            <a href="word.html">
                                词云图
                            </a>
                        </li>
                </nav>
            </div>
        </header>
        <!-- 主题内容 -->
        <div class="container">
            <h2 class="text-center">最近一周内招聘需求最多的前20家公司    </h2>
            <table id="table"></table>
            <div id="main" style="height:400px;">
            </div>
        </div>
        <!-- 主题结束 -->
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
        </script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">
        </script>
        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.common.min.js"></script>
        <script src="js/common.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
        <script type="text/javascript">
        $(function(){
            $('#table').bootstrapTable({
                url: "http://yehe.37he.cn/api/"+"company.php",
                striped: true,
                pageSize: 10,
                pagination: true,
                search: true,
                columns: [{
                    field: 'company_name',
                    title: '公司名字'
                }, {
                    field: 'salary',
                    title: '薪资范围',
                     formatter : function (value, row, index) {
                            return value.min + '-' + value.max;
                    }
                }, {
                    field: 'count',
                    title: '发布次数'
                },{
                    field: 'postion_id',
                    title: '职位链接',
                    formatter : function (value, row, index) {
                        var link =  "https://www.zhipin.com/job_detail/"+value+".html";
                        return "<a target='_blank' href='"+link+"'>查看详情</a>"
                    }
                } ],
            onLoadSuccess:function(){

                var data = $('#table').bootstrapTable('getData',true)
                initChart(data)
            },
            onPageChange:function(number, size){
                var data = $('#table').bootstrapTable('getData',true)
                initChart(data)
            }
        });


    })
        function initChart(data) {
            var myChart = echarts.init(document.getElementById('main'));
            var option  = {
            title : {
                text: '发布次数',
                subtext: '数据来源BOSS直聘',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: function (params) {

                    var res='<div><p>'+params['name'] +"<br/> 发布次数:<span>"+ params['value']+'</span>个</p>'

                    return res;
                },
            },
            xAxis: {
                type: 'category',
                data: [],
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [],
                type: 'bar',
                itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#83bff6'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#188df0'}
                        ]
                    )
                }
            }
            }]
        };
        var pageResult = data
        var legend = []
        var series = []
        pageResult.forEach(function(item,index){
            //option.xAxis.data.push(item['company_name'])
            var temp = {}
            temp.name = item['company_name']
            temp.value = item['count']
            option.series[0].data.push(temp)
        })
        myChart.setOption(option)
        }
        </script>
    </body>
</html>